<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view class="pure-loadmore" :class="_classes" :style="_styles">
		<!-- 加载更多 -->
		<view
			class="pure-loadmore__status pure-loadmore__status--more"
			v-if="status === 'more'"
			@tap="$emit('more')"
		>
			<slot name="more">
				<text class="pure-loadmore__text pure-loadmore__text--more">{{
					moreText
				}}</text>
			</slot>
		</view>

		<!-- 加载中 -->
		<view
			class="pure-loadmore__status pure-loadmore__status--loading"
			v-else-if="status === 'loading'"
		>
			<slot name="loading">
				<view
					class="pure-loadmore__icon pure-loadmore__icon--loading"
					v-if="iconName"
				>
					<pure-icon
						:name="iconName"
						:mode="$attrs.iconMode || $attrs['icon-mode']"
					></pure-icon>
				</view>
				<text
					class="pure-loadmore__text pure-loadmore__text--loading"
					>{{ loadingText }}</text
				>
			</slot>
		</view>

		<!-- 加载失败 -->
		<view
			class="pure-loadmore__status pure-loadmore__status--fail"
			v-else-if="status === 'fail'"
			@tap="$emit('fail')"
		>
			<slot name="fail">
				<text class="pure-loadmore__text pure-loadmore__text--fail">{{
					failText
				}}</text>
			</slot>
		</view>

		<!-- 没有更多 -->
		<view
			class="pure-loadmore__status pure-loadmore__status--nomore"
			v-else-if="status === 'nomore'"
		>
			<slot name="nomore">
				<text class="pure-loadmore__text pure-loadmore__text--nomore">{{
					nomoreText
				}}</text>
			</slot>
		</view>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits(["more", "fail"]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 纵向布局
	if (_props.vertical) array.push("pure-loadmore--vertical");

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
